<template>
    <div>
        <h1>新增用户</h1>
        <el-form :model="form" label-width="80px" style="max-width: 400px; margin-top: 20px;">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="公司" prop="company">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>   
    </div>
</template>

<script setup>

import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const form = ref({
    name: '',
    email: '',
    company: ''
});
const router = useRouter();

// 提交表单
const submitForm = async () => {
    try {
        const response = await axios.post('https://jsonplaceholder.typicode.com/users', form.value);
        console.log('用户信息提交成功:', response.data);
        router.push('/users');
    }
    catch (error) {
        console.error('提交用户信息失败:', error);
    }
};

const goBack = () => {
    router.go(-1);
};
</script>